<template>
  <Modal v-model="modelIsOpen" width="450" mask :closable="false">
    <template #footer>
      <Button size="default" @click="cancel" :loading="btnLoading">取消</Button>
      <Button type="primary" size="default" :loading="btnLoading" @click="ok"
        >确定</Button
      >
    </template>
    <Space direction="vertical" size="default" type="flex">
      <zz-Label text="管理授权"></zz-Label>
      <zz-Form ref="zzForm" title="授权信息">
        <Col span="24">
          <FormItem label="选择应用" prop="sysItem">
            <Select v-model="sysItem" size="default" @on-change="changeSys">
              <Option
                v-for="item in sysList"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Col>

        <Col span="24">
          <FormItem label="授权列表" prop="menuIds">
            <Tree
              ref="mTree"
              :data="menus"
              show-checkbox
              :empty-text="'无授权列表'"
            >
            </Tree>
          </FormItem>
        </Col>
      </zz-Form>
    </Space>
  </Modal>
</template>

<script>
export default {
  name: 'addUser',
  emits: ['query'],
  props: {
    roleTree: {
      type: Array,
    },
  },
  watch: {
    modelIsOpen: {
      async handler(newVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: false,
    },
  },
  data() {
    return {
      modelIsOpen: false,
      loading: false,
      btnLoading: false,
      roleItem: {},
      sysItem: 'zz-admin',
      sysList: [
        { value: 'zz-admin', label: 'zz-admin' },
        { value: 'zz-pda', label: 'zz-pda' },
      ],
      menus: [],
      menuType: '',
    }
  },
  methods: {
    // 初始化
    init() {
      this.query()
    },
    async query() {
      this.loading = true
      let param = {
        useSys: this.sysItem,
        roleId: this.roleItem.roleId,
        menuType: this.menuType,
      }
      let res = await this.$API.menuManagement.menu.getMenuTree4Bind.post(param)
      if (res.code === '01') {
        this.menus = res.data
        // 自动展开
        this.loading = false
      } else {
        this.loading = false
      }
    },
    changeSys(val) {
      this.sysItem = val
      this.query()
    },

    // 确定
    async ok() {
      this.btnLoading = true
      let param = this.dealParam()
      let res = await this.$API.roleManagement.role.roleMenuBind.post(param)
      if (res.code === '01') {
        this.$Message.success('授权成功')
        this.cancel()
        this.btnLoading = false
      } else {
        this.$Message.error(res.message)
        this.btnLoading = false
      }
    },
    // 组装参数
    dealParam() {
      let param = {
        roleDto: {},
        userMenuDtoList: [],
      }
      // 角色信息
      let role = {
        roleId: this.roleItem.roleId,
        roleCode: this.roleItem.roleCode,
        roleName: this.roleItem.roleName,
      }
      param.roleDto = role

      // 菜单信息
      let menus = this.$refs.mTree.getCheckedAndIndeterminateNodes()
      param.userMenuDtoList = menus

      return param
    },
    cancel() {
      this.modelIsOpen = false
      this.reset()
      this.$emit('query')
    },
    reset() {
      this.menus = []
      this.roleItem = {}
    },
  },
}
</script>

<style lang="less" scoped></style>
